<template>
	<view class="mycenter">
		<view class="mycenter-head" :style="{height: height_head}">
			<!-- <text class="mycenter-head-txt">我的</text> -->
		</view>
		<view class="mycenter-oneself">
			<view class="mycenter-oneself-head">
				<view class="mycenter-oneself-head-left">
					<image v-if="factory_msg.factoryImages" class="mycenter-oneself-head-left-img" :src=factory_msg.factoryImages mode=""></image>
					<image v-else class="mycenter-oneself-head-left-img" src=".https://www.zzzsyh.com/applets/agent/agent/head.png" mode=""></image>
				</view>
				<view class="mycenter-oneself-head-center">
					<view class="mycenter-oneself-head-center-top">
						<text class="mycenter-oneself-head-center-top-txt1 font_blod">{{factory_msg.factoryName}}</text>
						<!-- <text class="mycenter-oneself-head-center-txt">{{factory_msg.factoryPhone}}</text> -->
					</view>
					<view class="mycenter-oneself-head-center-top">
						<text class="mycenter-oneself-head-center-txt">{{factory_msg.factoryPhone|phoneHide}}</text>
					</view>
					<view class="mycenter-oneself-head-center-btm">
						<text
							class="mycenter-oneself-head-center-txt mycenter-oneself-head-center-btm-txt">{{factory_msg.factoryDetailAddress}}</text>
						<view class="mycenter-oneself-head-right" @click="cli_go_edit">
							<image class="mycenter-oneself-head-right-img"
								src="../../../static/manufacturers/pencil.png" mode=""></image>
						</view>
					</view>
				</view>

			</view>
			<view class="mycenter-oneself-bacnk">
				<view class="mycenter-oneself-bacnk-head">
					<view class="mycenter-oneself-bacnk-head-top font_blod" v-if="factory_bank.bankName">
						<image class="mycenter-bank-img" :src=factory_bank.bankLog mode=""></image>
						<text class="mycenter-bank-txt1">{{factory_bank.bankName}}</text>
						<text class="mycenter-bank-txt2">「 {{factory_bank.cardName}} 」</text>
					</view>
					<view class="mycenter-oneself-bacnk-head-top" v-else>
						暂无银行卡信息
					</view>
					<text class="mycenter-bank-txt3" @click="cli_goBank">点击更换</text>
				</view>
				<view class="mycenter-oneself-bacnk-sjx">
					<text class="mycenter-oneself-bacnk-btmsj"></text>
				</view>
			</view>
		</view>
		<view class="mycenter-main">
			<view class="mycenter-main-title">
				<text class="mycenter-main-title-back"></text>
				<text class="mycenter-main-title-txt font_blod">更多服务</text>
			</view>
			<view class="mycenter-main-box">
				<view class="mycenter-main-box-list">
					<view class="mycenter-main-box-list-li" @click="cli_myzh">
						<image class="mycenter-main-box-list-li-img" src="../../../static/manufacturers/my_1.png"
							mode=""></image>
						<text class="mycenter-main-box-list-li-txt">我的账户</text>
					</view>
					<view class="mycenter-main-box-list-li" @click="cli_go_product">
						<image class="mycenter-main-box-list-li-img" src="../../../static/manufacturers/my_2.png"
							mode=""></image>
						<text class="mycenter-main-box-list-li-txt">合作产品</text>
					</view>
					<view class="mycenter-main-box-list-li" @click="cli_go_xse">
						<image class="mycenter-main-box-list-li-img" src="../../../static/manufacturers/my_3.png"
							mode=""></image>
						<text class="mycenter-main-box-list-li-txt">销售额</text>
					</view>
				</view>
				<view class="mycenter-main-box-list-show" v-if="show_zh">
					<view class="mycenter-main-box-list-show-sjx">
						<text class="mycenter-main-box-list-show-sjx-txt"></text>
					</view>
					<view class="mycenter-main-box-list-zh">
						<view class="mycenter-main-box-list-li mycenter-main-box-list-li-two" @click="cli_go_qmd">
							<image class="mycenter-main-box-list-li-img" src="../../../static/manufacturers/my_7.png"
								mode=""></image>
							<text class="mycenter-main-box-list-li-txt">质保押金</text>
						</view>
						<view class="mycenter-main-box-list-li mycenter-main-box-list-li-two" @click="cli_go_submoney">
							<image class="mycenter-main-box-list-li-img" src="../../../static/manufacturers/my_8.png"
								mode=""></image>
							<text class="mycenter-main-box-list-li-txt">补助金</text>
						</view>
						<view class="mycenter-main-box-list-li">

						</view>
					</view>
				</view>

				<view class="mycenter-main-box-list">
					<view class="mycenter-main-box-list-li" @click="cli_go_client">
						<image class="mycenter-main-box-list-li-img" src="../../../static/manufacturers/my_4.png"
							mode=""></image>
						<text class="mycenter-main-box-list-li-txt">平台客户列表</text>
					</view>
					<view class="mycenter-main-box-list-li" @click="cli_go_ewm">
						<image class="mycenter-main-box-list-li-img" src="../../../static/manufacturers/my_5.png"
							mode=""></image>
						<text class="mycenter-main-box-list-li-txt">申请追溯二维码标签</text>
					</view>
					<view class="mycenter-main-box-list-li" @click="cli_go_set">
						<image class="mycenter-main-box-list-li-img" src="../../../static/manufacturers/my_6.png"
							mode=""></image>
						<text class="mycenter-main-box-list-li-txt">设置</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="tabbarBox">
			<view class="tabbarBox-li" @click="cli_go_order">
				<image class="tabbarBox-li-img" src="../../../static/manufacturers/tab1_2.png" mode=""></image>
				<text class="tabbarBox-li-txt font_blod">
					订单管理
				</text>
			</view>
			<view class="tabbarBox-li" @click="cli_go_subsidy">
				<image class="tabbarBox-li-img" src="../../../static/manufacturers/tab2.png" mode=""></image>
				<text class="tabbarBox-li-txt font_blod">
					补助金
				</text>
			</view>
			<view class="tabbarBox-li">
				<image class="tabbarBox-li-img" src="../../../static/manufacturers/mycenter.png" mode=""></image>
				<text class="tabbarBox-li-txt font_blod">
					我的
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	import { eventBus } from '../../../main.js'
	export default {
		data() {
			return {
				height_head: '',
				factoryId: uni.getStorageSync('id_factory'),
				factory_msg: {
					factoryName: '',
					factoryLicence: '',
					factoryPhone: '',
					factoryAddress: ''
				},
				factory_bank: {
					bankLog: '',
					bankName: '',
					cardName: ''
				},
				show_zh: false, // 我的账户内容隐藏显示
			}
		},
		onShow() {
			console.log(eventBus);
			eventBus.$on( 'cardName', e=> {
				this.factory_bank.cardName = e
			})
			eventBus.$on( 'bankName', e=> {
				this.factory_bank.bankName = e
			})
			eventBus.$on( 'bankLog', e=> {
				this.factory_bank.bankLog = e
			})
		},
		mounted() {
			this.getsystem()
			// 获取厂家信息
			this.getFactoryId()
			// 获取默认账户
			this.getFactoryBankCardsDefault()
		},
		methods: {
			// 点击我的账户隐藏显示
			cli_myzh() {
				this.show_zh = !this.show_zh
			},
			// 点击跳转更改资料
			cli_go_edit () {
				uni.navigateTo({
					url: '/pages/manufacturers/mycenterEdit/mycenterEdit'
				})
			},
			// 跳转到设置
			cli_go_set() {
				uni.navigateTo({
					url: '/pages/manufacturers/mycenterSet/mycenterSet'
				})
			},
			// 跳转到申请二维码
			cli_go_ewm() {
				uni.navigateTo({
					url: '/pages/manufacturers/applyEwm/applyEwm'
				})
			},
			// 跳转到平台客户列表
			cli_go_client() {
				uni.navigateTo({
					url: '/pages/manufacturers/client/client'
				})
			},
			// 跳转到合作产品
			cli_go_product() {
				uni.navigateTo({
					url: '/pages/manufacturers/productHezuo/productHezuo'
				})
			},
			// 跳转到销售额
			cli_go_xse () {
				uni.navigateTo({
					url: '/pages/manufacturers/mycenterSale/mycenterSale'
				})
			},
			// 跳转到质保押金
			cli_go_qmd() {
				uni.navigateTo({
					url: '/pages/manufacturers/qualityMoney/qualityMoney'
				})
			},
			// 跳转到补助金
			cli_go_submoney() {
				uni.navigateTo({
					url: '/pages/manufacturers/subsidyMoney/subsidyMoney'
				})
			},
			// 点击切换银行卡
			cli_goBank() {
				uni.navigateTo({
					url: '/pages/manufacturers/bankcard/bankcard'
				})
			},
			// 获取默认账户
			getFactoryBankCardsDefault() {
				uni.request({
					url: allapi.getFactoryBankCardsDefault,
					data: {
						factoryId: this.factoryId
					},
					success: (res) => {
						console.log(res);
						this.factory_bank = res.data.data
					}
				})
			},
			// 获取厂家信息
			getFactoryId() {
				uni.request({
					url: allapi.getFactoryId,
					data: {
						factoryId: this.factoryId
					},
					success: (res) => {
						console.log(res);
						this.factory_msg = res.data.data
					}
				})
			},
			// 跳转订单管理
			cli_go_order() {
				uni.redirectTo({
					url: '/pages/manufacturers/order/order'
				})
			},
			// 跳转补助金
			cli_go_subsidy() {
				uni.redirectTo({
					url: '/pages/manufacturers/subsidy/subsidy'
				})
			},
			// 获取系统信息
			getsystem() {
				let msg = uni.getMenuButtonBoundingClientRect()
				let btm = msg.bottom
				console.log(msg);
				this.height_head = btm + 'px'
			},
		},
		filters:{
			phoneHide(tel) {
				if(!tel){
					return tel
				}
				return tel.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
			}
		}
	}
</script>

<style scoped>
	.mycenter {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.mycenter-head {
		background: linear-gradient(270deg, #3CC5EF 0%, #74DFC5 100%);
		position: relative;
	}
	.mycenter-head-txt {
		position: absolute;
		bottom: 5rpx;
		left: 48rpx;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.mycenter-oneself {
		height: 320rpx;
		background: linear-gradient(270deg, #3CC5EF 0%, #74DFC5 100%);
		padding-top: 12rpx;
		display: flex;
		flex-direction: column;
	}

	.mycenter-oneself-head {
		display: flex;
		justify-content: space-between;
		height: 190rpx;
		padding: 24rpx 32rpx 0;
	}

	.mycenter-oneself-head-left-img {
		width: 112rpx;
		height: 112rpx;
		border-radius: 56rpx;
	}

	.mycenter-oneself-head-right-img {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
	}

	.mycenter-oneself-head-center {
		flex: 1;
		margin-left: 30rpx;
	}

	.mycenter-oneself-head-center-top {
		line-height: 40rpx;
		/* margin-top: 10rpx; */
	}

	.mycenter-oneself-head-center-top-txt1 {
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.mycenter-oneself-head-center-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.mycenter-oneself-head-center-btm {
		/* margin-top: 16rpx; */
		line-height: 34rpx;
		display: flex;
	}

	.mycenter-oneself-head-center-btm-txt {
		flex: 1;
	}

	.mycenter-oneself-bacnk {
		margin: 0 32rpx;
		border-top-left-radius: 36rpx;
		border-top-right-radius: 36rpx;
		background: #393B4F;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.mycenter-oneself-bacnk-btmsj {
		border-left: 30rpx solid transparent;
		border-right: 30rpx solid transparent;
		border-top: 20rpx solid #393B4F;
	}

	.mycenter-oneself-bacnk-head {
		flex: 1;
		padding: 24rpx 24rpx 0;
	}

	.mycenter-oneself-bacnk-head-top {
		display: flex;
		align-items: center;
		line-height: 52rpx;
		float: left;
		color: #FFFFFF;
	}

	.mycenter-oneself-bacnk-sjx {
		margin-bottom: -20rpx;
		display: flex;
		justify-content: center;
	}

	.mycenter-bank-img {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}

	.mycenter-bank-txt1 {
		font-size: 28rpx;
		color: #FFFFFF;
		margin-left: 16rpx;
	}

	.mycenter-bank-txt2 {
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: 8rpx;
	}

	.mycenter-bank-txt3 {
		display: block;
		padding: 10rpx 28rpx;
		border-radius: 28rpx;
		background: linear-gradient(270deg, #F6DBBF 0%, #F2D2AF 100%);
		font-size: 24rpx;
		color: #5E4332;
		font-weight: 400;
		line-height: 34rpx;
		float: right;
		margin-top: 8rpx;
	}

	.mycenter-main {
		flex: 1;
		margin: 0 24rpx;
		background: #FFFFFF;
		margin-top: 45rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}

	.mycenter-main-title {
		display: flex;
		align-items: center;
		margin-top: 32rpx;
	}

	.mycenter-main-title-back {
		width: 10rpx;
		height: 34rpx;
		background: #5DD4D6;
		border-radius: 5rpx;
		display: block;
	}

	.mycenter-main-title-txt {
		font-size: 32rpx;
		color: #333333;
		margin-left: 24rpx;
	}

	.mycenter-main-box-list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 48rpx;
		margin-bottom: 24rpx;
	}

	.mycenter-main-box-list-li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;

	}

	.mycenter-main-box-list-li-img {
		width: 64rpx;
		height: 64rpx;
	}

	.mycenter-main-box-list-li-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 8rpx;
	}

	.mycenter-main-box-list-zh {
		margin: 0 48rpx;
		height: 154rpx;
		background: #F3F5F7;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;

	}

	.mycenter-main-box-list-show {
		display: flex;
		flex-direction: column;
	}

	.mycenter-main-box-list-show-sjx {
		display: flex;
	}

	.mycenter-main-box-list-show-sjx-txt {
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-bottom: 10rpx solid #F3F5F7;
		margin-left: 105rpx;
	}


	.tabbarBox {
		left: 0;
		bottom: 0;
		/* position: fixed; */
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.1);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tabbarBox-li {
		width: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tabbarBox-li-img {
		width: 60rpx;
		height: 60rpx;
	}

	.tabbarBox-li-txt {
		font-size: 24rpx;
		color: #666666;
	}
</style>
